<template>
    <div style="position: relative;">
      <img src="../assets/边框.png" style="width: 700px;">
      <div style="position: absolute; top:1%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #415058; font-weight: bold;">
        图书馆
      </div>
      <div id="timeinlib" style="width: 350px; height: 400px;position: absolute; top:10%; left: 0%;"></div>
      <div id="bookinlib" style="width: 350px; height: 400px;position: absolute; top:10%; left: 50%;"></div>
    </div>
  </template>

<script>
import * as echarts from 'echarts';
export default{


mounted() {
    var chartDom = document.getElementById('timeinlib');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
    text: '学习时长',
    left:'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top:'7%'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun']
  },
  series: [
    {
      name: '本周',
      type: 'bar',
      data: [ 7.29,  3.12,  9.45,  5.68,  2.91, 11.00,  8.11]
    },
    {
      name: '上周',
      type: 'bar',
      data: [ 4.23,  6.34,  1.00,  0.00, 10.00, 12.00,  3.45]
    },
    {
      name: '上上周',
      type: 'bar',
      data: [ 8.67,  5.23,  7.11,  2.00, 11.00,  6.00,  4.56]
    }
  ]
};
    option && myChart.setOption(option);

    var chartDom = document.getElementById('bookinlib');
    var myChart2 = echarts.init(chartDom);
    var option2;

    option2 = {
  title: {
    text: '借阅情况',
    left:'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}次'
  },
  toolbox: {
    feature: {
    }
  },
  legend: {
    data: ['教科书', '文学作品', '历史读物', '科普', '其他'],
    top:30
  },
  series: [
    {
      name: 'Funnel',
      type: 'funnel',
      left: '10%',
      top: 90,
      bottom: 20,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 62, name: '其他' },
        { value: 41, name: '科普' },
        { value: 29, name: '历史读物' },
        { value: 87, name: '文学作品' },
        { value: 123, name: '教科书' }
      ]
    }
  ]
};

option2 && myChart2.setOption(option2);
},

};




</script>